<template>
  <div class="conditions-container">
    <el-form :inline="true" :model="formQuery" ref="formQuery" class="formQueryBox" size="small"
      label-width="100px">

      <el-row :gutter="0" >
        <el-col :span="6"  class="colStyle">
          <el-form-item label="编号" >
            <el-input
              v-model="formQuery.code"
              placeholder="请输入编号">
              <i class="el-icon-edit el-input__icon" slot="suffix"></i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6"  class="colStyle">
          <el-form-item label="名称" >
            <el-input
              v-model="formQuery.name"
              placeholder="请输入名称">
              <i class="el-icon-edit el-input__icon" slot="suffix"></i>
            </el-input>
          </el-form-item>
        </el-col>
        
      </el-row>

      <el-row :gutter="0" >
        <el-col :span="6" :offset="18"  class="colStyle">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="query" >查询</el-button>
            <el-button type="default" icon="el-icon-refresh" @click="resetForm('formQuery')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// import store from "@/store";
export default {
  name: "ConditionsQuery",
  data() {
    return {
      formQuery: {
        code: '',
        name: '',
      }
    }
  },
  props: {
    // standard: String,
    // flag: String,
  },
  created() {
    // let self = this;
    
  },
  methods: {
    resetForm(formName) {
      let self = this;
      self.$refs[formName].resetFields();
      self.formQuery = {
        code: '',
        name: '',
      };
      self.$emit('queryInitTable', self.formQuery, 'reset');
      
    },
    query() {
      let self = this;
      let queryData = {
        code: self.formQuery.code,
        name: self.formQuery.name,
      };
      // console.log('queryData:', queryData);
      self.$emit('queryInitTable', queryData, 'query');
      // self.$emit('queryInitTable', self.formQuery, 'query');
    },

  },
}
</script>

<style scoped>
.el-row:has(.el-button){
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.el-row:has(.el-button) .el-form-item{
  display: flex;
  justify-content: flex-end;
  padding-right: 10px;
}
.el-form .el-row .colStyle:nth-child(1) .el-form-item__label{
  width: 60px!important;
}
.conditions-container .formQueryBox {
    padding-top: 10px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 1px 4px 0 rgba(151, 151, 151, 0.1);
}
.conditions-container .formQueryBox .el-form-item {
  display: flex;
  align-items: center;
}

.colStyle {
  text-align: center;
  height: 45px;
}

</style>